{{ 'component-article-card.css' | asset_url | stylesheet_tag }}
{{ 'component-card.css' | asset_url | stylesheet_tag }}
{{ 'section-main-blog.css' | asset_url | stylesheet_tag }}



  <div class="sup_articles main-blog page-width">

    <div class="element-margin">
      <a href="{{ section.settings.link }}" class="article-template__link link animate-arrow{% if blog.comments_enabled? == false %} spaced-section{% endif %}">
        <span class="icon-wrap">{% render 'icon-bigJoin' %}</span>
        {{ 'blogs.article.back_to_blog' | t: title: blog.title }}
      </a>
    </div>

    <h1 class="title--primary">{{ blog.title | escape }}</h1>

    <div class="blog-articles blog-ul{% if section.settings.layout == 'collage' %}blog-articles--collage{% endif %}">
      {%- for article in blog.articles -%}
        <div class="blog-articles__article article article-li">
          {%- render 'support-card', article: article, image_height: section.settings.image_height, show_image: section.settings.show_image, show_date: section.settings.show_date, show_author: section.settings.show_author -%}
        </div>
      {%- endfor -%}
    </div>


    {%- if section.settings.show_view_all -%}
    <div class="blog-read_more blog__view-all center medium-hide">
      <span class="blog__button button">
        {{ section.settings.read_more }}
      </span>
    </div>
  {%- endif -%}

  </div>

{% schema %}
{
  "name": "t:sections.main-blog.name",
  "tag": "section",
  "class": "spaced-section",
  "settings": [
    {
      "type": "header",
      "content": "t:sections.main-blog.settings.header.content"
    },
    {
      "type": "select",
      "id": "layout",
      "options": [
        {
          "value": "grid",
          "label": "t:sections.main-blog.settings.layout.options__1.label"
        },
        {
          "value": "collage",
          "label": "t:sections.main-blog.settings.layout.options__2.label"
        }
      ],
      "default": "collage",
      "label": "t:sections.main-blog.settings.layout.label"
    },
    {
      "type": "checkbox",
      "id": "show_image",
      "default": true,
      "label": "t:sections.main-blog.settings.show_image.label"
    },
    {
      "type": "select",
      "id": "image_height",
      "options": [
        {
          "value": "adapt",
          "label": "t:sections.main-blog.settings.image_height.options__1.label"
        },
        {
          "value": "small",
          "label": "t:sections.main-blog.settings.image_height.options__2.label"
        },
        {
          "value": "medium",
          "label": "t:sections.main-blog.settings.image_height.options__3.label"
        },
        {
          "value": "large",
          "label": "t:sections.main-blog.settings.image_height.options__4.label"
        }
      ],
      "default": "medium",
      "label": "t:sections.main-blog.settings.image_height.label",
      "info": "t:sections.main-blog.settings.image_height.info"
    },
    {
      "type": "html",
      "id": "link",
      "default": "/pages/support",
      "label": "Pages support"
    },
    {
      "type": "checkbox",
      "id": "show_date",
      "default": false,
      "label": "t:sections.main-blog.settings.show_date.label"
    },
    {
      "type": "checkbox",
      "id": "show_author",
      "default": false,
      "label": "t:sections.main-blog.settings.show_author.label"
    },
    {
      "type": "text",
      "id": "read_more",
      "default": "Read more",
      "label": "Read more"
    },
    {
      "type": "checkbox",
      "id": "show_view_all",
      "default": true,
      "label": "t:sections.featured-blog.settings.show_view_all.label"
    },
    {
      "type": "paragraph",
      "content": "t:sections.main-blog.settings.paragraph.content"
    }
  ]
}
{% endschema %}
